import React from 'react'
import { Switch, Redirect, withRouter } from 'react-router'
import { PrivateRoute } from 'components/route'
import { Layout, Fixed } from 'react-layout-pane'
import Ribbon from './ribbon'
import FetchItemId from './fetchItemId'
import Nodata from './nowData'
import MainView from './mainView'

const FetchItem = ({ match, location, pid }) => (
  <Layout type="column">
    <Fixed className="ribbon">
      <Ribbon lableState={match.params.labelState} />
    </Fixed>
    <Switch location={location}>
      <PrivateRoute
        path={`${match.url}`}
        render={props => <FetchItemId {...props} pid={pid} lableState={match.params.labelState} />}
        exact
      />
      <PrivateRoute path={`${match.url}/nodata`} render={props => <Nodata {...props} />} exact />
      <PrivateRoute
        path={`${match.url}/:id`}
        render={props => <MainView {...props} lableState={match.params.labelState} />}
        exact
        pid={pid}
      />
    </Switch>
  </Layout>
)

export default withRouter(FetchItem)
